<template>
  <div>
    <p>{{ name }}</p>
    <p>姓名：{{ info.name }}</p>
    <p>年龄：{{ info.age }}</p>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "hello"
    };
  },
  /**
   * nuxt 通过 asyncData()的方式异步获取数据
   * asyncData()方法 会直接返回到data里
   */
  //   asyncData() {
  //     //   myjson.com: 用于生成一个json数据的请求地址网站
  //     return axios.get("https://api.myjson.com/bins/r9eko").then(res => {
  //       // 通过info接收请求回来的数据，等同于在data中有一个info对象
  //       /** 为什么不能用this.data中的数据进行赋值？
  //        * 这是在页面渲染之前，组件创建之前来进行的
  //        */
  //       return { info: res.data };
  //     });
  //   }
  async asyncData() {
    //   需要通过对象的形式接收请求回来的返回值
    let { data } = await axios.get("https://api.myjson.com/bins/r9eko");
    return { info: data };
  }
};
</script>